<template>
  <div class="toubu-a">
    <div class="biaoyu">
      <router-link to="/Shouye">
        <img class="zuohao" src="../../../public/images/38_03.jpg" alt="" />
      </router-link>
      <h5>词汇语法</h5>
    </div>
    <div class="zhuti" v-for="cihuiyufa in cihuiyufas" :key="cihuiyufa.id">
      <img class="yingyutubiao" :src="cihuiyufa.img" alt="" />
      <h5 class="danci">{{ cihuiyufa.name }}</h5>
      <div class="shijian">{{ cihuiyufa.type }}</div>
      <div class="ziliao">
        <img class="r" :src="cihuiyufa.xiaotu" alt="" />
        <p class="mian">{{ cihuiyufa.xin }}</p>
      </div>
      <div class="minzi">
        <p class="ming">{{ cihuiyufa.shuliang }}</p>
        <p class="baoming">{{ cihuiyufa.guanfang }}</p>
      </div>
    </div>
    <!-- <div class="zhuti">
      <img class="yingyutubiao" src="../../../public/images/39_03.jpg" alt="" />
      <h5 class="danci">3天英语绝杀全面突破营</h5>
      <div class="shijian">开课时间:2021-12-30 20:00:00 &nbsp;&nbsp;3课时</div>
      <div class="ziliao">
        <img class="r" src="../../../public/images/41_03.jpg" alt="" />
        <p class="mian">免费</p>
      </div>
      <div class="minzi">
        <p class="ming">杨亮</p>
        <p class="baoming">已有318人报名</p>
      </div>
    </div>
    <div class="zhuti">
      <img class="yingyutubiao" src="../../../public/images/39_03.jpg" alt="" />
      <h5 class="danci">单词速记挑战营</h5>
      <div class="shijian">开课时间:2021-12-30 20:00:00 &nbsp;&nbsp;3课时</div>
      <div class="ziliao">
        <img class="r" src="../../../public/images/40_03_03.jpg" alt="" />
        <p class="mian-a">￥799</p>
      </div>
      <div class="minzi">
        <p class="ming">祁连山</p>
        
      </div>
    </div>
     <div class="zhuti">
      <img class="yingyutubiao" src="../../../public/images/39_03.jpg" alt="" />
      <h5 class="danci">单词速记挑战营</h5>
      <div class="shijian">开课时间:2021-12-30 20:00:00 &nbsp;&nbsp;3课时</div>
      <div class="ziliao">
        <img class="r" src="../../../public/images/40_03_03.jpg" alt="" />
        <p class="mian-a">￥3999</p>
      </div>
      <div class="minzi">
        <p class="ming">祁连山</p>
       
      </div>
    </div>
     <div class="zhuti">
      <img class="yingyutubiao" src="../../../public/images/39_03.jpg" alt="" />
      <h5 class="danci">单词速记挑战营</h5>
      <div class="shijian">开课时间:2021-12-30 20:00:00 &nbsp;&nbsp;3课时</div>
      <div class="ziliao">
        <img class="r" src="../../../public/images/40_03_03.jpg" alt="" />
        <p class="mian-a">￥4999</p>
      </div>
      <div class="minzi">
        <p class="ming">祁连山</p>
        
      </div>
    </div> -->
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "cihuiyufas",

  data() {
    return {
      cihuiyufas: [],
    };
  },
  created() {
    // ajax发请求
    $.ajax({
      url: "http://localhost:3000/cihuiyufa",
      success: (data) => {
        this.cihuiyufas = data;
      },
    });
  },
};
</script>

<style scoped>
.biaoyu {
  height: 0.5rem;
  background-color: #fff;
}
.zuohao {
  margin-top: 0.15rem;
}
.biaoyu h5 {
  width: 1.14rem;
  margin-top: -0.29rem;
  font-size: 0.25rem;
  font-weight: bold;
  margin-left: 1.22rem;
}
.zhuti {
  height: 1.5rem;
  margin-top: 0.39rem;
  margin-left: 0.2rem;
  background-color: #fff;
}
.yingyutubiao {
  height: 0.21rem;
}
.danci {
  margin-left: 0.8rem;
  margin-top: -0.28rem;
  font-size: 0.2rem;
  font-weight: 6rem;
}
.shijian {
  margin-top: 0.05rem;
  color: #a2a2a2;
}
.ziliao {
  display: flex;
  height: 0.45rem;
  margin-top: 0.18rem;
}
.mian {
  font-size: 0.2rem;
  font-weight: bold;
  color: #f04a37;
  margin-left: 2.5rem;
  line-height: 0.45rem;
}
.mian-a {
  margin-left: 2.3rem;
  font-size: 0.2rem;
  font-weight: bold;
  color: #f04a37;
}
.minzi {
  display: flex;
}
.ming {
  margin-top: 0.08rem;
  color: #a2a2a2;
}
.baoming {
  margin-left: 1.9rem;
  margin-top: 0.08rem;
  color: #a2a2a2;
}
</style>